page {
    background-size: 100% 100%;
}

.tips {
    font-size: 24rpx;
    margin-top: 30rpx;
    text-align: center;
}

.tips-card-c {
    align-items: center;
    background: rgba(30, 30, 30, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0rpx;
    position: fixed;
    top: 0rpx;
    width: 100%;
    z-index: 9;
}

.tips-card-c .tips-content {
    background: url('https://bus-cdn.hquesoft.com/box/card-bg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    height: 564rpx;
    padding: 30rpx;
    width: 666rpx;
}

.tips-card-c .tips-content .title-c {
    align-items: center;
    display: flex;
}

.tips-card-c .tips-content .title-c .title {
    color: #fff;
    flex-grow: 1;
    font-size: 46rpx;
    font-weight: 700;
}

.tips-card-c .tips-content .title-c .total {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 30rpx;
    color: #fff;
    display: flex;
    font-weight: 500;
    padding: 4rpx 26rpx;
    text-align: center;
}

.tips-card-c .tips-content .title-c .total .icon-arrow-right {
    display: inline;
    font-size: 40rpx;
    margin-left: -8rpx;
    padding: 0rpx !important;
    width: 24rpx;
}

.tips-card-c .tips-content .item-title {
    color: #000;
    font-size: 32rpx;
    font-weight: 700;
    margin-top: 50rpx;
}

.tips-card-c .tips-content .item-text {
    color: #999;
    font-size: 24rpx;
    font-weight: 500;
    margin-top: 20rpx;
}

.tips-card-c .tips-content .get-btn {
    background: #ffcc09;
    border-radius: 10rpx;
    color: #333;
    font-size: 30rpx;
    font-weight: 700;
    height: 96rpx;
    line-height: 96rpx;
    margin: 30rpx auto 0rpx;
    text-align: center;
    width: 100%;
}

.tips-card-c .close-btn {
    border: 4rpx solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 40rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin-top: 10rpx;
    text-align: center;
    width: 80rpx;
}

.float-btn {
    align-items: center;
    background: #ffefb3;
    border-radius: 33px 0 0 33px;
    box-sizing: border-box;
    display: flex;
    font-size: 24rpx;
    font-weight: 500;
    height: 66rpx;
    justify-content: space-around;
    padding: 0rpx 14rpx;
    position: fixed;
    right: 0rpx;
    top: 260rpx;
    width: 130rpx;
}

.float-btn image {
    height: 36rpx;
    width: 30rpx;
}

.float-btn.my {
    top: 350rpx;
}

.float-btn.my image {
    height: 40rpx;
    width: 30rpx;
}

.float-btn.share {
    top: 700rpx;
}

.float-btn.share .icon-wechat {
    font-size: 40rpx;
}

.float-btn.rand-list {
    padding-left: 26rpx !important;
    text-align: center;
    top: 800rpx;
}

.float-btn.rand-list .icon-wechat {
    font-size: 50rpx;
}

.float-btn.rand-list::after {
    display: none;
}

.float-headimg-c {
    height: 100rpx;
    position: fixed;
    right: 0rpx;
    text-align: center;
    top: 460rpx;
    width: 140rpx;
}

.float-headimg-c .headimg {
    border-radius: 50%;
    height: 80rpx;
    width: 80rpx;
}

.float-headimg-c .score {
    font-size: 24rpx;
    font-weight: 500;
}

.container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    padding-bottom: 120rpx;
    padding-top: 100rpx;
    width: 100%;
}

.container .body {
    width: 100%;
}

.yaoyiyao {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.yaoyiyao image {
    animation: yaoyiyao 1s;
    animation-iteration-count: infinite;
    height: 76rpx;
    transform-origin: center;
    width: 76rpx;
}

.yaoyiyao text {
    color: #333;
    font-size: 24rpx;
    font-weight: 700;
}

.yaoyiyao.small image {
    height: 50rpx;
    width: 50rpx;
}

.yaoyiyao.small text {
    font-size: 24rpx;
}

@-webkit-keyframes yaoyiyao {
    0% {
        transform: scale(1) rotate(-4deg);
    }

    25% {
        transform: rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(4deg);
    }

    75% {
        transform: rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(-4deg);
    }
}

@keyframes yaoyiyao {
    0% {
        transform: scale(1) rotate(-4deg);
    }

    25% {
        transform: rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(4deg);
    }

    75% {
        transform: rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(-4deg);
    }
}

.box {
    height: 540rpx;
    margin: 4rpx auto 0;
    position: relative;
    width: 360rpx;
}

.box.small {
    height: 450rpx;
    width: 300rpx;
}

.box-img {
    position: relative;
    z-index: 1;
}

.box-img,
.box-img image {
    height: 100%;
    width: 100%;
}

@-webkit-keyframes box-animation {
    0% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}

@keyframes box-animation {
    0% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}

.box-img.move {
    animation: moving 1s;
    animation-fill-mode: forwards;
}

.box-img.move2 {
    animation: moving2 0.6s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes moving {
    0% {
        left: 0;
        transform: scale(1);
    }

    35% {
        left: 80rpx;
        transform: scale(0.6);
    }

    100% {
        left: -800rpx;
        transform: scale(0.6);
    }
}

@keyframes moving {
    0% {
        left: 0;
        transform: scale(1);
    }

    35% {
        left: 80rpx;
        transform: scale(0.6);
    }

    100% {
        left: -800rpx;
        transform: scale(0.6);
    }
}

@-webkit-keyframes moving2 {
    0% {
        left: 0;
        top: -800rpx;
    }

    100% {
        left: 0;
        top: 0;
    }
}

@keyframes moving2 {
    0% {
        left: 0;
        top: -800rpx;
    }

    100% {
        left: 0;
        top: 0;
    }
}

.box-number {
    color: #000;
    font-size: 24rpx;
    font-weight: 700;
    margin-top: 60rpx;
    text-align: center;
}

.box-number .inner-tips {
    font-weight: 400;
    margin-top: 20rpx;
}

.card-list {
    margin-top: 30rpx;
}

.card-list,
.card-list .item {
    display: flex;
    justify-content: center;
}

.card-list .item {
    align-items: center;
    background: #ffe78a;
    border-radius: 24rpx;
    font-size: 26rpx;
    height: 48rpx;
    width: 150rpx;
}

.card-list .item:last-child {
    margin-left: 30rpx;
}

.card-list .item image {
    height: 30rpx;
    margin-right: 10rpx;
    width: 30rpx;
}

.thumb-list {
    display: flex;
    margin-top: 40rpx;
    white-space: nowrap;
}

.thumb-list .item {
    display: inline-block;
    margin-right: 20rpx;
    position: relative;
}

.thumb-list .item:first-child {
    margin-left: 20rpx;
}

.thumb-list .item .thumb {
    background: #f8efc5;
    border: 4rpx solid #ffb640;
    border-radius: 6rpx;
    height: 200rpx;
    width: 150rpx;
}

.thumb-list .item .title {
    font-size: 24rpx;
    font-weight: 500;
}

.thumb-list .item .price-c,
.thumb-list .item .title {
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
    display: -webkit-box;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    width: 150rpx;
}

.thumb-list .item .price-c {
    font-size: 22rpx;
}

.thumb-list .item .tips {
    font-size: 24rpx;
    font-weight: 500;
    top: -30rpx;
}

.thumb-list .item .tips,
.thumb-list .item .tips-bottom {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 4rpx 0rpx;
    position: absolute;
    text-align: center;
    width: 100%;
}

.thumb-list .item .tips-bottom {
    color: red;
    font-size: 22rpx;
    top: 166rpx;
}

.thumb-list .item .tips-bottom.showed {
    background: #2ba246;
    color: #fff;
}

.thumb-list.small .item .thumb {
    height: 160rpx;
    width: 120rpx;
}

.thumb-list.small .item .title {
    width: 120rpx;
}

.thumb-list.small .item .tips-bottom {
    top: 130rpx;
}

.footer {
    bottom: 0;
    position: fixed;
    width: 100%;
}

.footer .btns {
    display: flex;
    justify-content: space-between;
    margin: 0 50rpx;
    padding-bottom: 40rpx;
}

.footer .btns .button {
    align-items: center;
    background-color: #ffbf42;
    border-radius: 10rpx;
    box-shadow: 0 0 16rpx hsla(0, 0%, 82%, 0.5);
    color: #fff;
    display: flex;
    font-size: 30rpx;
    font-weight: 700;
    height: 80rpx;
    justify-content: center;
    line-height: 80rpx;
    text-align: center;
    width: 304rpx;
}

.footer .btns .button image {
    height: 30rpx;
    margin-right: 10rpx;
    width: 30rpx;
}

.footer .btns .button:nth-child(1) {
    background: #ffbf42;
    border: 3rpx solid #fff;
}

.footer .btns .button:nth-child(2) {
    background-color: #fff;
    box-shadow: 0 18rpx 30px 0 rgba(255, 187, 42, 0.2);
    color: #000;
}

.footer .btns .button.disable {
    background: #bbb9b2;
    color: #f6f6f6;
}

.footer.small .btns {
    padding-bottom: 50rpx;
}

.box-tips {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10rpx;
    box-sizing: border-box;
    color: #fff;
    font-size: 26rpx;
    left: 125rpx;
    padding: 50rpx 24rpx;
    position: fixed;
    text-align: center;
    top: 20%;
    width: 500rpx;
    z-index: 11100;
}

.box-tips .close-btn {
    color: #f1f1f1;
    font-size: 30rpx;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
}

.box-tips text {
    font-size: 30rpx;
    font-weight: 700;
    padding: 0 10rpx;
}

@-webkit-keyframes show {
    from {
        bottom: -480rpx;
    }

    to {
        bottom: 0;
    }
}

@keyframes show {
    from {
        bottom: -480rpx;
    }

    to {
        bottom: 0;
    }
}

.container.dark .yaoyiyao text {
    color: #aaa;
}

.container.dark .box-number,
.container.dark .float-headimg-c,
.container.dark .thumb-list .title {
    color: #ddd;
}
